<template>
  <a-card :bordered="false">
    <!-- 左侧文件树 -->
    <a-col :span="4" class="clName">
      <a-tree
        :treeData="treeData"
        :defaultExpandAll="defaultExpandAll"
        @select="this.onSelect"
        style="height: 500px;overflow-y: auto;"
      >
      </a-tree>
    </a-col>
    <!-- 中间面板 -->
    <a-col :span="2"/>
    <!--右侧缩略图-->
    <a-col :span="18">
      <a-spin tip="Loading..." :spinning="spinning">
        <div v-for="(file, key) in dataSource" :key="key">
          <a-row>
            <a-col :span="24"><p><a-divider orientation="left">{{ file.fileName }}</a-divider></p></a-col>
            <!-- 预览区域 -->
            <a-col :span="24">
              <template v-if="file.filePdfPath">
                <div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
                  <div style="width: 100%;height: 100%;position: relative;padding: 8px;" @click="pdfPreview(file.title)">
                    <img style="width: 100%;" src="~@/assets/pdf4.jpg">
                  </div>
                </div>
              </template>
              <template v-else>
                (暂无材料，点击"选择文件"或"扫描上传"上传文件)
              </template>
            </a-col>
          </a-row>
        </div>
      </a-spin>
    </a-col>
    <pdf-preview-modal ref="pdfmodal"></pdf-preview-modal >
  </a-card>
</template>

<script>

import { getAction } from '@/api/manage'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'
import PdfPreviewModal from './modules/PdfPreviewModal'
const mockdata = [{
  'id': '1',
  'key': '1',
  'title': '实例.pdf',
  'fileCode': 'shili',
  'fileName': '实例',
  'filePdfPath': '实例'
}]

export default {
  name: 'JeecgPdfView',
  components: {
    PdfPreviewModal
  },
  data() {
    return {
      description: 'PDF预览页面',
      // 文件类型集
      treeData: [{
        title: '所有PDF电子档',
        key: '0-0',
        children: mockdata }],
      // 文件数据集
      dataSource: mockdata,
      allData: mockdata,
      // 上传文件集
      defaultExpandAll: true,
      // 加载中
      spinning: false,
      url: {
        pdfList: '/api/pdfList'
      }
    }
  },
  created() {
    // this.loadData();
  },
  methods: {
    loadData() {
      this.spinning = false
      getAction(this.url.pdfList).then((res) => {
        if (res.length > 0) {
          this.allData = res
          this.dataSource = res
          this.treeData[0].children = res
        }
        this.spinning = false
      })
    },
    pdfPreview: function(title) {
      console.log(title)
      const token = Vue.ls.get(ACCESS_TOKEN)
      this.headers = { 'X-Access-Token': token }
      this.$refs.pdfmodal.previewFiles('22_1618131814962.pdf', token)
    },
    // 选择文件类型
    onSelect(selectedKeys, info) {
      this.dataSource = []
      if (selectedKeys[0] === undefined || selectedKeys[0] === '0-0') {
        this.dataSource = this.allData
      } else {
        this.dataSource.push(info.node._props.dataRef)
      }
      console.log('SELECT-->dataSource', this.dataSource)
    },
    // model回调
    modalFormOk() {
      this.loadData()
    }
  }
}
</script>

<style scoped>
  .clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle{width:10px}
</style>
